<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>角色权限详情</title>
	<link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all"/>
	<link rel="stylesheet" th:href="@{/static/css/footer.css}" media="all"/>
	<link rel="stylesheet" th:href="@{/static/css/thesame.css}" media="all"/>
	<link rel="stylesheet" th:href="@{/static/css/page.css}" media="all"/>
	<link rel="stylesheet" th:href="@{/static/css/popCss.css}" media="all"/>
	<link rel="stylesheet" th:href="@{/static/role/css/role.css}"  media="all"/>
    <style type="text/css">
        /*取消选中效果*/
		div{
	    -moz-user-select:none;/*火狐*/
	    -webkit-user-select:none;/*webkit浏览器*/
	    -ms-user-select:none;/*IE10*/
	    -khtml-user-select:none;/*早期浏览器*/
	      user-select:none;
		}
		#scrollDiv::-webkit-scrollbar {display: none;!important;}
		#scrollDiv { -ms-overflow-style: none; }
    </style>
</head>
<script th:inline="javascript">var basePath = [[${#httpServletRequest.getContextPath()}]];</script>
<body>
<div class="add-title pad25px"><span onclick="returnRoleList()" style="cursor: pointer;" class="mr10px"><img th:src="@{/static/img/return_icon.png}"></span><span id="actionTitle">查询角色</span></div>
<div class="new-add-box new-add-box-width bgWhite box-shadows border-radius4">
	<!--<div class="new-add-box-scroll">-->
	<div class="">
		<div class="add-mess add-mess-con mar25px">
			<p class="mb20px">
				<span class="fb">角色名称：</span>
				<span id="roleName"></span>
			</p>
			<p class="mb20px">
				<span class="fb">角色描述：</span>
				<span id="roleDesc"></span>
			</p>
		</div>
		<div style="margin-top:-30px;" class="pl25px pr25px pb25px">
			<div class="layui-tab layui-tab-parent">
				<ul class="layui-tab-title">
					<li class="layui-this">功能权限<span class="orange ml5px"></span></li>
					<li>授权用户<span class="orange ml5px" id="userCount">0</span></li>
				</ul>
				<div class="layui-tab-content layui-tab-content-child padding0 border1px border-top0" style="padding: 20px;">
					<div class="layui-tab-item layui-show">
						<div>
							<div id="scrollDiv" style="overflow-y: scroll; overflow-x: hidden;height: 260px;margin-bottom:20px;width: 1171px;">
								<div>
									<div class="module-con">
										<nav style="margin-bottom: 20px;" class="module-bav textCenter border-radius4 border1px mr15px">
											<p class="bgBlue-rgba fb border-top-radius4">平台板块</p>
											<ul class="plat">
												<li th:each="app,appstat:${appList}" th:class="${appstat.first}?'current':''" th:attr="data-id=${app.menu_no}" th:text="${app.name}"></li>
											</ul>
										</nav>
										<div style="margin-bottom: 20px;overflow: hidden" class="layui-form layui-form-color border-radius4 border1px">
											<table id="roleMenu" style="margin-right: -44px;" border="0" cellspacing="0" cellpadding="0">
												<thead>
												<tr class="bgBlue-rgba textCenter">
													<th>一级模块</th>
													<th>二级模块</th>
													<th>操作权限</th>
												</tr>
												</thead>
												<tbody>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="layui-tab-item">
						<div class="border1px border-radius4 relative">
							<table class="layui-hide" id="userTable" lay-filter="test"></table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</div>
<div class="layui-footer layui-footer-one">
	<div class="btn-con textCenter">
		<span id="returnBtn" style="cursor: pointer;width:110px;" onclick="returnRoleList()" class="btn-one">返回列表</span>
		<span id="deleteBtn" style="cursor: pointer;" th:attr="data-no=${roleNo}"  onclick="deleteRole(this)" class="btn-two">删&nbsp;除</span>
		<span id="editBtn" style="cursor: pointer;" th:attr="data-no=${roleNo}" onclick="editRole(this)" class="btn-two">编&nbsp;辑</span>
	</div>
</div>

<script type="text/javascript" th:src="@{/static/js/jquery-2.1.3.min.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/static/js/layuiCon.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/static/layui/layui.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/static/js/date.js}" charset="utf-8"></script>
<script>
	//layer,element初始化
	var layer;
	layui.use(['element', 'layer'], function(){
		layer = layui.layer;
	});

	//权限选择初始化
	var fuwu_no=$('.plat li').eq(0).data("id");
	var yanglao_no=$('.plat li').eq(1).data("id");
	var shuju_no=$('.plat li').eq(2).data("id");
	var zonghe_no=$('.plat li').eq(3).data("id");
	var fuwu_check='';
	var yanglao_check='';
	var shuju_check='';
	var zonghe_check='';

    $(function(){
		$('.module-bav li').click(function(){
			$(this).addClass('current').siblings().removeClass('current');
		})
		//查询初始化
		queryRoleInit();
		//权限板块切换
		menuTabSwitch();
		//用户查询
		userTableGrenate();
	})

	/**
	 * 权限板块切换
	 */
	function menuTabSwitch(){
		$('.module-bav li').click(function(){
			var oldMenuNo =  $('.current').data("id");
			$(this).addClass('current').siblings().removeClass('current');
			var menuNo = $(this).data("id");
			//查询权限菜单
			menuTableGrenate(menuNo);
		})
	}

    /**
     * 权限菜单表格查询
     */
    function menuTableGrenate(menuNo){
		//获取板块勾选操作代码
		var checkarr=getPlatCheck(menuNo);
		console.log(checkarr);
		$.ajax({
			type:"post",
			url:basePath+"/sysRole/getMenuList",
			dataType:"json",
			data:{"menuNo":menuNo},
			success:function(rst){
				var html="";
				if(rst.code==0){
					$.each(rst.data,function(i,module){
						$.each(module.funcList, function(j,func){
							html+='<tr>';
							html+=(j==0?'<td style="width:126px" rowspan="'+module.funcCount+'">'+module.name+'</td>':'');
							html+=(module.funcCount==1?'<td style="width:160px"></td>':'<td style="width:160px">'+func.name+'</td>');
							html+='<td>';
							html+='<div>';
							$.each(func.btnList,function(k,btn){
								var btnName = btn.name;
								//var btnName = btn.name=='数据维护'?'数据维护（增|删|改）':btn.name;
								if(checkarr.indexOf(btn.menu_no)!=-1){
									html+='<span><input type="checkbox" lay-filter="switchTest" disabled="disabled" checked="checked" name="plat'+menuNo+'" lay-skin="primary" data-id="'+btn.menu_no+'" title="'+btnName+'"></span>';
								}else{
									html+='<span><input type="checkbox" lay-filter="switchTest" disabled="disabled" name="plat'+menuNo+'" lay-skin="primary" data-id="'+btn.menu_no+'" title="'+btnName+'"></span>';
								}
							})
							html+='</div>';
							html+='</td>';
							html+='</tr>';
						})
					})
				}
				if(menuNo==zonghe_no){
					$("tbody").attr("style","border-bottom: 1px solid #eee;");
				}else{
					$("tbody").removeAttr("style");
				}
				$("#roleMenu tbody").html(html);
				layui.use(['form'], function() {
					var form = layui.form;
					form.render('checkbox');
				});

			}
		})

    }

	/**
	 * 查询初始化
	 */
	function queryRoleInit(){
		var roleNo = '[[${roleNo}]]';
		//管理员查询角色时，不显示编辑，删除按钮
		if(roleNo=='CE69C2C9575953DB'){
			$("#editBtn").hide();
			$("#deleteBtn").hide();
		}
		//console.log("roleNo="+roleNo);
		if(!isNull(roleNo)){
			$.ajax({
				type:"post",
				url:basePath+"/sysRole/getRoleInfo",
				dataType:"json",
				data:{"roleId":roleNo},
				success:function(rst){
					$("#roleNo").val(rst.data.id);
					$("#roleName").html(rst.data.name);
					$("#roleDesc").html(rst.data.role_desc);
					$("#userCount").html(rst.data.count);
					fuwu_check=rst.data.fuwuCat;
					yanglao_check=rst.data.yanglaoCat;
					shuju_check=rst.data.shujuCat;
					zonghe_check=rst.data.zongheCat;
					console.log("zonghe_check="+zonghe_check);
					menuTableGrenate(fuwu_no);
				}
			})
		}
	}

	/**
	 * 获取板块勾选操作代码
	 */
	function getPlatCheck(menuNo){
		if(menuNo==fuwu_no){
			return fuwu_check;
		}else if(menuNo==yanglao_no){
			return yanglao_check;
		}else if(menuNo==shuju_no){
			return shuju_check;
		}else if(menuNo==zonghe_no){
			return zonghe_check;
		}else{
			return '';
		}
	}

	/**
	 * 返回列表
	 */
	function returnRoleList(){
		window.location.href=basePath+"/sysRole/listPage";
	}

	/**
	 * 判断是否
	 */
	function isNull(value) {
		return value == null || value === "" || value === undefined;
	}

	/**
	 * 权限用户表格查询
	 */
	function userTableGrenate(){
		var roleNo = '[[${roleNo}]]';
		layui.use(['table'], function() {
			var element = layui.element;
			table = layui.table;
			//表格
			table.render({
				elem: '#userTable'
				,url: '../sysRole/getUserList'
				,where:{"roleId":roleNo}
				,page: true //开启分页
				,limit: 5
				,limits: [5,10,20]
				,cols: [
					[ //表头
						{field:'LOGIN_NAME', title:'登录账号', width:130,},
						{field:'USER_NAME', title:'用户姓名', width:130,},
						{field:'ORG_NAME', title:'所属组织', width:130,},
						{field:'POST', title:'部门/职务', width:130,},
						{field:'PHONE', title:'手机号码', width:150,},
						{field:'LOGIN_TIME', title:'最近登录时间', width:200,},
						{field:'STATUS', title:'状态', width:100,
							templet: function(res){
								var status = res.STATUS;
								var html = status==0?html = "<em style=\"color:red;font-style: inherit;\">"+res.STATUS_NAME+"</em>":res.STATUS_NAME;
								return html;
							}
						},
					]
				]
			});
		});
	}

	/**
	 * 角色删除
	 */
	function deleteRole(obj){
		var no = $(obj).data("no");
		var args=[];
		args.push(no);
		deleteCon("",deleteRoleCommit, args, 1);
	}

	/**
	 * 删除角色
	 */
	function deleteRoleCommit(id) {
		$.ajax({
			url:basePath+"/sysRole/delete",
			type:"post",
			dataType:"json",
			data:{"roleNo":id},
			success:function (result) {
				if(result.code == 200){
					layerResult("删除成功",1);
				}else{
					layerResult(result.msg,2);
				}
			}
		})
	}

	/**
	 * layer result
	 */
	function layerResult(msg,type){
		var layer;
		layui.use(['layer'], function() {
			layer = layui.layer;
			layer.ready(function(){
				layer.msg(msg, {icon: type, time:1500},function(){
					window.location.href=basePath+"/sysRole/listPage";
				});
			})
		});
	}

	/**
	 * 跳转到修改角色
	 */
	function editRole(obj){
		var no = $(obj).data("no");
		window.location.href=basePath+"/sysRole/editPage?roleNo="+no;
	}




</script>
</body>
</html>
